<!-- 登录页 -->
<template>
  <el-row type="flex" class="row-bg" justify="center">
    <!-- 左侧Logo和提示 -->
    <el-col :xs="6" :lg="7">
      <h2>金川公司监控平台</h2>
      <el-image
        style="width: 150px; height: 150px"
        :src="require('../assets/weixin.png')"
        :fit="fit"
      >
      </el-image>
      <p>微信扫码,谢谢</p>
      <p>测试的登录页面</p>
    </el-col>
    <!-- 分割线 -->
    <el-col :span="3">
      <el-divider direction="vertical" style="height: 24px"></el-divider>
    </el-col>
    <!-- 登录表单 -->
    <el-col :xs="6" :lg="7" class="loginform">
      <!-- <h1>登录</h1> -->
      <h1>登陆</h1>
      <el-form
        :model="loginForm"
        :rules="rules"
        ref="loginForm"
        label-width="100px"
        class="demo-loginForm"
      >
        <el-form-item label="用户名：" prop="username" style="width: 380px">
          <el-input class="loginstyle" v-model="loginForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码：" prop="password" style="width: 380px">
          <el-input
            class="loginstyle"
            v-model="loginForm.password"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item label="验证码：" prop="code" style="width: 380px">
          <el-input
            v-model="loginForm.code"
            class="codeStyle"
            style="width: 144px;float: left;"
            maxlength="5"
          ></el-input>
          <el-image
            :src="codeImg"
            class="codeImg"
            @click="getcodeImg"
          ></el-image>
        </el-form-item>
        <el-form-item class="btnStyle">
          <el-button type="primary" @click="submitForm('loginForm')"
            >登录</el-button
          >
          <el-button @click="resetForm('loginForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script>
import qs from "qs";
export default {
  created() {
    this.getcodeImg();
  },
  data() {
    return {
      fit: "",
      url: "../assets/weixin.png",
      loginForm: {
        username: "",
        password: "",
        code: "",
        key: ""
      },
      //前端数据校验
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        code: [
          { required: true, message: "请输入验证码", trigger: "blur" },
          { min: 5, max: 5, message: "长度 5 个字符", trigger: "blur" }
        ]
      },
      codeImg: null
    };
  },
  methods: {
    submitForm(formName) {
      //绑定form表单中的ref实例用于校验通过后的操作
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$http
            .post("/login?" + qs.stringify(this.loginForm))
            .then(res => {
              //从请求头中拿到jwt认证信息
              const jwt = res.headers["authorization"];
              this.$store.commit("SET_TOKEN", jwt);
              this.$router.push("/index");
            })
            .catch(error => {
              this.getcodeImg();
              console.log("error submit!!");
            });
        } else {
          this.getcodeImg();
          this.loginForm.code = "";
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //获取验证码
    getcodeImg() {
      this.$http.get("/kaptcha").then(res => {
        console.log(res);
        this.loginForm.key = res.data.data.key;
        this.codeImg = res.data.data.codeImg;

        this.loginForm.code = "";
      });
    }
    //刷新验证码
    // restartImg(){
    //   this.$http.get("/kaptcha").then(res => {
    //     console.log(res);
    //     console.log("codeImg",res.data.data.codeImg);
    //     this.loginForm.token = res.data.data.token;
    //     this.codeImg = res.data.data.codeImg;
    //   });
    // }
  }
};
</script>

<style scoped>
.el-row {
  background-color: #fafafa;
  height: 100%;
  display: flex;
  align-items: center;
  text-align: center;
  /* color: #fafafa;
  background-image: url("../assets/bg.jpg"); */
}
.el-form-item {
  margin-left: 50px;
}
.el-divider {
  height: 200px;
}
.codeImg {
  float: left;
  margin-left: 15px;
  border-radius: 5px;
}
.btnStyle /deep/ .el-form-item__content {
  margin-left: -15px !important;
}
</style>
